<template>
    <div>
      <el-row class="top">
        <el-col :span="16">
          <el-button type="primary" size="small" style="margin-top: 10px;margin-left: 10px">
            <router-link :to="{path:'/addlinkman'}">
              <i class="el-icon-circle-plus">&nbsp;&nbsp;新建联系人</i>
            </router-link>
          </el-button>
        </el-col>
        <el-col :span="6">
          <span style="color: #667B8F">搜索：</span>
          <el-input v-model="cupName" size="small" clearable onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;" placeholder="请输入联系人姓名/电话" @change="serchLinkman" suffix-icon="el-icon-search" style="width: 200px;margin-top:12px;cursor:pointer">
          </el-input>
        </el-col>
        <el-col :span="2" style="margin-top: 12px">
          <el-popover
            placement="bottom"
            title="全部列名"
            width="100"
            trigger="manual"
            v-model="visible">
            <el-checkbox-group v-model="colOptions">
              <el-checkbox v-for="item in colSelect"
                           :disabled="item=='姓名' || item=='联系电话' || item=='所属客户'"
                           :label="item"
                           :key="item"
                           style="display: block" ></el-checkbox>
            </el-checkbox-group>
            <span style="color: red;font-size: x-small;">注：字段过多会出现水平滚动条</span>
            <el-button size="small" icon="el-icon-s-tools" style="width:80px;" slot="reference"
                       @click="visible = !visible">设置</el-button>
          </el-popover>
        </el-col>
      </el-row>
      <el-row class="tab">
        <el-table v-loading="loading"
                  element-loading-text="拼命加载中"
                  element-loading-spinner="el-icon-loading" ref="multipleTable" :data="linkmanList" style="width: 100%" height="480">
          <!--          复选框列-->
          <el-table-column type="selection">
          </el-table-column>

          <el-table-column prop="cupName" label="姓名" v-if="colData[0].istrue">
          </el-table-column>

          <el-table-column prop="cupPhone" label="联系人电话" v-if="colData[1].istrue">
          </el-table-column>

          <el-table-column prop="customerByCustomId.cusName" label="所属客户" v-if="colData[2].istrue">
          </el-table-column>

          <el-table-column prop="cupAddressProvince" label="联系地址" v-if="colData[3].istrue">
            <template slot-scope="p">
              {{p.row.cupAddressProvince}}{{p.row.cupAddressCity}}{{p.row.cupAddressArea}}
            </template>
          </el-table-column>

          <el-table-column prop="cupXxaddress" label="街道信息" v-if="colData[4].istrue">
          </el-table-column>

          <el-table-column prop="cupPost" label="职务" v-if="colData[5].istrue">
          </el-table-column>

          <el-table-column prop="cupEmail" label="邮箱" v-if="colData[6].istrue">
          </el-table-column>

          <el-table-column prop="cupQq" label="QQ" v-if="colData[7].istrue">
          </el-table-column>

          <el-table-column prop="cupSex" label="性别" v-if="colData[8].istrue">
          </el-table-column>

          <el-table-column prop="cupMaster" label="是否为首要" v-if="colData[9].istrue">
            <template slot-scope="pe">
              <span v-if="pe.row.cupMaster==1">是</span>
              <span v-if="pe.row.cupMaster==0">否</span>
            </template>
          </el-table-column>

          <el-table-column prop="cupCreateTime" label="创建时间" v-if="colData[10].istrue">
            <template slot-scope="scope">{{ scope.row.cupCreateTime | formatDate}}</template>
          </el-table-column>

          <el-table-column prop="" label="操作">
            <template slot-scope="p">
              <span v-if="p.row.customerByCustomId.customEmpid.employeesId==userId">
                <el-button type="text" v-if="perssionButton.indexOf('linkman_edit')>-1" @click="update(p.row)" title="编辑" class="el-icon-edit" style="color: black"></el-button>
              &nbsp; <el-button type="text" v-if="perssionButton.indexOf('linkman_delete')>-1" @click="del(p.row)" class="el-icon-delete" title="删除" style="color: black"></el-button>
              </span>
            </template>
          </el-table-column>
        </el-table>

        <!--      分页-->
        <div class="page">
          <el-pagination
            :page-sizes="sizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalSize"
            :current-page.sync="currPage"
            @current-change="pageChange"
            @size-change="sizeChange">
          </el-pagination>
        </div>
      </el-row>
    </div>
</template>

<script>
  import {formatTimeToStr} from '@/assets/format'
export default {
  name: 'CuLinkman',
  data: function () {
    return {
      loading: true,
      visible:false,
      colOptions: [//设置默认全选
        "姓名",
        "联系人电话","所属客户","联系地址","街道信息",
        // "是否为首要","职务","QQ","性别",
        "Email","创建日期"
      ],
      colSelect: [
        "姓名",
        "联系人电话","所属客户",
        "联系地址","街道信息",
        "职务","Email","QQ","性别","是否为首要","创建日期"
      ],
      colData: [//表格显示
        {title: "姓名",istrue: true},
        {title: "联系人电话",istrue: true},
        {title: "所属客户",istrue: true},
        {title: "联系地址",istrue: true},
        {title: "街道信息",istrue: true},
        {title: "职务",istrue: false},
        {title: "Email",istrue: true},
        {title:"QQ",istrue:false},
        {title: "性别",istrue: false},
        {title: "是否为首要",istrue: false},
        {title: "创建日期",istrue: true}
      ],
      cupName: '', // 搜索联系人
      // 分页
      sizes:[10, 20, 30, 40],
      totalSize: 10, //     总条数
      currPage: 1, //     默认第一页
      pageSize: 5, //      页大小
      linkmanList: [], //联系人列表
      perssionButton:[],//标识符
      userId:'',//当前登录人id
    }
  },
  created:function () {
    this.initButton()
    this.userId=JSON.parse(sessionStorage.getItem('user')).employeesId;
    this.pageSize=this.sizes[0]
    if(this.$route.path != null && this.$route.path != ""){
      this.init(this.currPage,this.pageSize,this.serch,this.typeId)
      this.loading=false;
    }
  },
  methods: {
    initButton(){//标识符
      this.perssionButton=JSON.parse(sessionStorage.getItem("button"));
    },
    init(currPage,pageSize,cupName){
      this.$axios.get("http://localhost:8088/vue/man-select",{params:{page:currPage,size:pageSize,cupName:cupName}})
      .then(v=>{
        this.linkmanList=v.data.rows
        this.totalSize=v.data.totals
        this.loading=false;
      }).catch()
    },
    pageChange(page){//切换页码
      this.init(page,this.pageSize,this.cupName)
    },
    sizeChange(pageSize){//页大小改变
      this.init(1,pageSize,this.cupName)
      this.pageSize = pageSize
    },
    serchLinkman(){//联系人模糊查询
      this.init(1,this.pageSize,this.cupName)
    },

    update (row) { // 编辑联系人信息
      console.log(row)
      this.$router.push({
        path:'/addlinkman',
        query:{
          culinkman:row
        }
      })
    },
    del (row) { // 删除联系人操作
      alert(row.cupId)
      this.$confirm('此操作将永久删除该联系人, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(v => {
        var cupId=JSON.stringify({cupId:row.cupId})
        this.$axios.post("http://localhost:8088/vue/del-culinkman",this.qs.stringify({cupId:cupId}))
          .then(v=>{
            if(v.data!=null && v.data!=""){
              this.$message.error(v.data)
            }else{
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              // 刷新表格
              this.init(this.currPage,this.pageSize,this.cupName)
            }
          }).catch()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
  },
  watch:{
    $route(){
      if(this.$route.path != null && this.$route.path != ""){
        this.init(this.currPage,this.pageSize,this.serch,this.typeId)
        this.loading=false;
      }
    },
    colOptions(valArr) {
      var arr = this.colSelect.filter(i => valArr.indexOf(i) < 0); // 未选中
      this.colData.filter(i => {
        if (arr.indexOf(i.title) != -1) {
          i.istrue = false;
          this.$nextTick(() => {
            this.$refs.multipleTable.doLayout();
          });
        } else {
          i.istrue = true;
          this.$nextTick(() => {
            this.$refs.multipleTable.doLayout();
          });
        }
      });
    },
  },
  filters: {// 日期格式化
    formatDate: function (time) {
      if (time != null && time != '') {
        var date = new Date(time)
        return formatTimeToStr(date, 'yyyy-MM-dd')
      } else {
        return ''
      }
    }
  }
}
</script>

<style scoped>
  .top{
    border: 1px solid #D3DCE6;
    width: 100%;
    height: 55px;
    margin-bottom: 10px;
    background: white;
  }

  a:active{
    color: #333333;
  }

  .tab{
    border: 1px solid #D3DCE6;
    background: white;
    min-height: 545px;
    overflow: hidden;
  }

  .page{
    margin-top:10px;
    float: right;
    margin-right: 20px;
  }
</style>
